
// 商品列表
import { findSubCategoryGoods } from '@/api/category'
import { ref, onMounted, reactive } from 'vue'
import { useRoute } from 'vue-router'

export function useGoodList () {
  // 排序：点击tab实现交互效果
  // publishTime(最新)，orderNum(人气)，price(价格)， evaluateNum(评论)
  const sortType = ref('publishTime')

  // 实现列表数据的获取
  // 思路：
  //   1. 使用最基础的默认字段，获取到基础列表数据(字段结构已经准备好，获取数据的方法页准备好了 接口是通的)
  //   2. 根据不同的区域产出的额外字段，修改已经提供好的字段结构 重新调用获取数据的方法即可
  // 获取商品list
  // 请求参数
  const route = useRoute()
  const reqParams = reactive({
    page: 1,
    pageSize: 20,
    categoryId: route.params.id,
    sortField: null, // 排序类别
    attrs: [], // 商品属性
    brandId: null // 品牌名称
  })
  const goodList = ref([])
  async function loadGoodList () {
    const res = await findSubCategoryGoods(reqParams)
    // console.log(res)
    goodList.value = res.result.items
    // 第一页数据请求回来之后 设置isLoading.value=false 可以去请求下一页数据
    isLoading.value = false
  }
  onMounted(() => {
    loadGoodList()
  })

  // 更改排序 重新获取数据
  function changeSortType (type) {
    // 点击字段 实现交互 添加active类名激活当前字段
    // sortType.value = sortType // 报错原因 sortType.value 拿到的是 形参
    sortType.value = type
    // 1. 把传下来的sortType 赋值给请求参数reqData中的sortField字段
    reqParams.sortField = type
    // 2. 修改完毕之后，重新调用loadGoodList方法，获取最新的数据
    loadGoodList()
  }

  // 使用品牌字段进行数据筛选
  function changeBrand (brand) {
    // 修改请求参数
    reqParams.brandId = brand.id
    // 重新获取数据
    loadGoodList()
  }

  // ------------------------------------
  // 点击 saleProperties字段 通过添加active类名激活当前 字段
  function toogleSelected (i, item) {
    // 排他思想 先把其他项设置为false  再把自己设置为 true
    item.properties.forEach(item => {
      item.selected = false
    })
    // 把自己设置为 true
    i.selected = true

    // 使用saleProperties字段进行数据筛选
    // 思路：正式添加之前先检测一下当前要添加的项是否在attrs中存在一个同类的项
    // 如果已经存在，就先把这项删除，再重新添加筛选数据
    // 如果传下来的是"全部" 字段，则把当前项删除
    // attr: [{groupName: '颜色'}]

    // 去重 检测当前要添加的项是否在attrs中存在一个同类的项
    const index = reqParams.attrs.findIndex(attr => {
      return attr.groupName === item.name
    })
    if (index > -1) { // 如果有重复的项，则删除当前项，再接着重新添加新字段
      reqParams.attrs.splice(index, 1)
    }

    // 点击全部 如果传下来的是 '全部' 规格，把当前项删除
    // attr: [{groupName: '颜色'}]
    if (i.id === null) {
      const index = reqParams.attrs.findIndex(attr => attr.groupName === item.name)
      if (index > -1) {
        reqParams.attrs.splice(index, 1)
      }
    }

    // 点击筛选字段，修改请求参数
    reqParams.attrs.push({
      groupName: item.name, // 属性组名称
      propertyName: i.name // 属性名称
    })

    loadGoodList() // 根据筛选条件重新获取数据
  }

  // 加载下一页数据
  const isLoading = ref(true) // 数据是否正在加载中
  const isFinished = ref(false) // 数据是否全部加载完毕(后台所有数据)
  // 获取下一页数据
  async function loadNext () {
    // console.log('开始获取下一页数据')
    // 使用下一页参数获取下一页数据
    // 目标：加载下一页数据
    //  0. isLoading 设置为true 告诉子组件当前已经在加载中，不要重复触发load事件
    //  1. 请求参数  reaParams.page ++
    //  2. 使用最新的page字段数据获取下一页数据 发送网络请求
    //  3. 下一页数据返回之后 需要把新数据拼接到老数据的后面
    //  4. 重新把isLoading设置为false  告诉子组件数据加载完毕，可以再次开启监听了
    //  5. 判断返回数据的长度是否为0 如果为0，isFinished就设置为true
    isLoading.value = true // true 当前在获取数据中，重复离开进入视口不需要再次触发load事件
    reqParams.page++ // 下一页
    const res = await findSubCategoryGoods(reqParams) // 发送请求, 获取下一页数据
    console.log('下一页数据', res)
    // 判断是否全部加载完毕
    if (res.result.items.length === 0) {
      isFinished.value = true // 停止监听
    }
    goodList.value = [...goodList.value, ...res.result.items] // 拼接数据
    // 下一页数据加载完毕, isLoading置为false，告诉子组件可以触发load事件获取下一页数据
    isLoading.value = false
    // 经过分析我们发现现在加载下一页数据所依赖的响应式数据和方法多数都在useGoodList模块下
    // 如果我们想使用 必须在useGoodList模板中导出 然后在当前的模板中导入
    // 方案: 把加载下一页数据的逻辑 也放到useGoodList中不就没有这些麻烦了
  }

  return { goodList, toogleSelected, sortType, reqParams, changeSortType, changeBrand, loadNext, isLoading, isFinished }
}
